<!-- Dom模板 -->
<template>
  <div>
    <!-- Dom内容 -->
    <div class="bag">
      <div class="bagheader">
        <div class="title">
          <span class="title_left">掌上听书</span>
          <div class="title_right">
            <span class="search"></span>
            <span class="add"></span>
          </div>
        </div>
        <div class="header" @click="tiao">
          <div class="head_left">
            <img
              :src="
                $store.state.bags.musicBagItem
                  ? $store.state.bags.musicBagItem.book_img_url
                  : ''
              "
              alt=""
            />
          </div>
          <div class="head_connent">
            <p>
              {{
                $store.state.bags.musicBagItem
                  ? $store.state.bags.musicBagItem.bookname
                  : "还未播放书籍"
              }}
            </p>
            <span>上次已播放到第{{ $store.state.bags.musicIndex + 1 }}集</span>
          </div>
          <div class="head_right">
            <span>
              <img src="../../../static/img/v2_qskx9d.png" alt="" />
            </span>
          </div>
          <!-- {{ getChild_index }} -->
        </div>

        <!-- <el-tabs
          class="list_load"
          v-model="activeName"
          @tab-click="handleClick"
        >
          <el-tab-pane
            v-for="(item, index) in navList"
            :key="index"
            :label="item.meta.name"
            :name="item.meta.childrenIndex"
          >
          </el-tab-pane>
        </el-tabs> -->
        <van-tabs v-model="active" @click="liClick(1)">
          <!-- title="标签 1" -->
          <van-tab
            v-for="(item, index) in navList"
            :title="item.meta.name"
            :key="index"
            >{{ item.meta.name }}</van-tab
          >
        </van-tabs>
      </div>
      <div class="bagall">
        <transition name="hua">
          <router-view class="huaBox" />
        </transition>
      </div>
    </div>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
import { Toast } from "vant";
export default {
  data() {
    return {
      msg: "测试",
      index: 1,
      navList: [],
      activeName: "0",
      newIndex: 0,
      li: [1, 2, 3],
      loading: false,
      finished: false,
      active: +sessionStorage.getItem("bag_index") || 0,
    };
  },
  components: {},
  // 生命周期 - 创建完成（访问当前this实例）
  created() {
    if (sessionStorage.getItem("userId")) {
      this.$store.commit(
        "bags/gaiMuserPlay",
        this.$store.getters["login/history"][0]
      );
    }
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.$router.options.routes[1].children.forEach((item, index) => {
      if (!item.hidden) {
        this.navList.push(item);
      }
    });
    this.$router.history.push(this.navList[this.active].path);
    // this.activeName =
    //   "" +
    //   this.navList.findIndex((item) => {
    //     return item.path === this.$route.path;
    //   });
    // console.log(this.$store.state.bags.bookItem) //当前播放的音频的信息
  },
  // Vue方法定义
  methods: {
    handleClick(tab) {
      this.$router.history.push(this.navList[tab.paneName].path);
      sessionStorage.setItem("bag_index", tab.paneName);
    },
    tiao() {
      this.$store.commit("bags/getMusicItem", {
        item: this.$store.state.bags.bookItem,
        index: 1,
      });
      if (this.$store.state.bags.bookCatalog.length !== 0) {
        this.$router.history.push({
          path: "/playmusic",
          query: {
            path: this.$route.path,
          },
        });
      } else {
        Toast("请先收听");
      }
    },
    liClick(item) {
      // console.log(item);
      // console.log(this.active);

      this.$router.history.push(this.navList[this.active].path);
      sessionStorage.setItem("bag_index", this.active);
    },
  },
  computed: {
    getChild_index() {
      this.activeName =
        "" +
        this.navList.findIndex((item) => {
          return item.path === this.$route.path;
        });
      return "";
    },
  },
};
</script>

<style scoped>
/* @import url(); 引入css类 */
.bag {
  height: calc(100vh - 1.493333rem);
}
.bagheader {
  /* height: 4.24rem; */
  height: 4.56rem;
  width: 100vw;
  /* padding: 0 21px; */
  background: white;
  z-index: 9;
}
.title {
  width: 100%;
  /* padding: 0 .56rem;  */
  line-height: 0.64rem;
  padding: 0.266667rem 0.56rem;
}
.title_left {
  font-size: 0.426667rem;

  font-weight: bold;
}
.header {
  width: 90%;
  margin: 0 auto 0.426667rem;
  height: 1.786667rem;
  line-height: 0.533333rem;
  border-radius: 0.213333rem;
  background-color: rgba(255, 255, 255, 21);
  display: flex;
  box-shadow: 0px 0.053333rem 0.506667rem 0.053333rem rgba(0, 0, 0, 0.06);
}
.head_left {
  width: 30%;
  height: 100%;
}
.head_connent {
  width: 58%;
  height: 100%;
  padding: 0.266667rem 0;
}
.head_connent span {
  width: 3.173333rem;
  height: 0.48rem;
  color: rgba(175, 175, 175, 100);
  font-size: 0.32rem;
  text-align: left;
}
.head_right {
  width: calc(100% - 88%);
  height: 100%;
  float: right;
}
.head_right span img {
  width: 0.666667rem;
  height: 0.666667rem;
  vertical-align: middle;
  margin: 0;
  margin-top: 0.08rem;
}
.head_right span {
  display: inline-block;
  width: 0.853333rem;
  height: 0.853333rem;
  line-height: 0.533333rem;
  background-color: rgba(0, 0, 0, 0.28);
  text-align: center;
  border-radius: 50%;
  margin-top: 16px;
}
.header img {
  width: 1.066667rem;
  height: 1.44rem;
  margin: 0.16rem 0.533333rem;
}
.list_load {
  width: 100%;
  line-height: 0.693333rem;
  display: flex;
  margin-top: 15px;
  justify-content: space-between;
  background: white;
}
.list_load p {
  font-size: 0.48rem;
  background: white;
}
.is-active {
  transform: scale(1.2);
  color: #f33a65;
  color: rgba(0, 0, 0, 1);
  font-size: 0.426667rem;
  font-family: PingFangSC-regular;
}
.list_load .list_p {
  /* transform: scale(1.24); */
  /* font-size: ; */
  /* color: #af8f97; */
  color: rgba(243, 58, 101, 100);
  font-size: 18px;
  text-align: left;
  font-family: PingFangSC-regular;
}
.bagall {
  width: 100%;
}
.huaBox {
  width: 100%;
  /* height: auto; */
  /* position: relative;
  top: 2.666667rem; */
  position: fixed;
  transition: all 0.3s ease-in-out;
}
.hua-enter {
  transform: translate(100vw);
}
.hua-leave-active {
  transform: translate(-100vw);
}
.va .el-tabs__nav-scroll .el-tabs__active-bar #tab-0 {
  transform: scale(1.2);
  color: #f33a65;
}
</style>
<style>
.bag .el-tabs__active-bar {
  background-color: #f33a65;
}
.bag .el-tabs__item.is-active {
  color: #f33a65;
}
.bag .el-tabs__nav-wrap::after {
  background-color: white;
}
.el-tabs__item:hover {
  color: black;
  cursor: none;
}

/* van */
.bag .van-tabs__content {
  display: none;
}
.bag .van-tab--active {
  color: #f33a65;
  transform: scale(1.2);
}
.bag .van-tabs__line {
  background-color: #f33a65;
  width: 25px;
}
</style>